<template>
  <!-- 按钮 -->
  <div class="btn-input">

    <el-input class="input" placeholder="查找文件" prefix-icon="el-icon-search" v-model="keyWord" clearable></el-input>

    <el-cascader ref="cascaderData" class="select" :show-all-levels="true" v-model="folderId" :options="folders"
      :props="{checkStrictly: true }"></el-cascader>

    <el-button class="btn" type="success" round @click="toCreatFolder()">新建文件夹
      <i class="el-icon-upload el-icon--right"></i></el-button>
    <el-button class="btn" type="primary" round @click="batchdownload()">批量下载
      <i class="el-icon-download el-icon--right"></i>
    </el-button>
    <el-button class="btn" type="danger" round @click="batchDelete()">批量删除
      <i class="el-icon-delete el-icon--right"></i>
    </el-button>
    <el-button class="btn" type="info" round @click="back()">返回上一级
      <i class="el-icon-back el-icon--right"></i>
    </el-button>


  </div>
</template>

<script>
  import router from "@/router"
  import apiUrl from '@/api/url'
  import link from '@/api/Link'
  export default {
    name: "FolderHeader",
    props: ['previewId'],
    data () {
      return {
        folders: [],
        folderId: [],
        keyWord: '',
      }
    },
    methods: {
      //初始化
      init () {
        let user = JSON.parse(localStorage.getItem('user'))

        let data = {
          state: 0,
          id: user.rootId
        }
        //下拉框--获取数据

        link(apiUrl.baseUrl + '/sys/folder/findList/v2', 'POST', JSON.stringify(data), null).then((ok) => {
          if (ok.data.code == 0) {
            this.folders = []
            this.folders.push(this.cascaderInit(ok.data.data))
          } else {
            this.$message({
              message: ok.data.msg,
              type: "error",
            });
          }
        })
        let rootId = user.rootId
        this.folderId = []
        this.folderId.push(rootId)

      },
      //构建下拉框数据
      cascaderInit (data) {
        if (!data) {
          return
        }
        let folders = {
          value: data.folder.id,
          label: data.folder.folderName,
          children: []
        }

        data.childFolders.forEach(element => {
          folders.children.push(this.cascaderInit(element))
        });

        return folders;
      },
      //上传文件按钮
      toCreatFolder () {
        //路由跳转
        router.push("/create?type=folder")
      },

      //批量下载按钮
      batchdownload () {
        let ids = []
        let folderIds = []
        let fileSelection = this.$parent.$refs.fileTable.selection;

        for (let index = 0; index < fileSelection.length; index++) {
          const element = fileSelection[index];
          if (element.folderId != null) {
            ids.push(element.id)
          } else {
            folderIds.push(element.id)
          }
        }
        if (ids.length != 0 || folderIds.length != 0) {
          this.$parent.ids = ids
          this.$parent.folderIds = folderIds
          this.$parent.downloadOpen = !this.$parent.downloadOpen
        } else {
          this.$message({
            message: "请选择文件",
            type: "warning",
          });
        }

      },

      //批量删除
      batchDelete () {

        let ids = []
        let folderIds = []
        let fileSelection = this.$parent.$refs.fileTable.selection;

        for (let index = 0; index < fileSelection.length; index++) {
          const element = fileSelection[index];
          if (element.folderId != null) {
            ids.push(element.id)
          } else {
            folderIds.push(element.id)
          }
        }
        let data = {
          fileIds: ids,
          folderIds: folderIds
        }
        if (ids.length == 0 && folderIds.length == 0) {
          this.$message({
            message: "请选择文件",
            type: "warning",
          });
          return
        }
        this.$confirm('此操作将文件移动到回收站, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          link(apiUrl.baseUrl + '/sys/file/batchDelete/v1', 'POST', JSON.stringify(data)).then(ok => {
            if (ok.data.code === 0) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.$parent.init()
              this.init()
            } else {
              this.$message({
                message: ok.data.msg,
                type: "error",
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },

      //返回上一级
      back () {
        if (this.folderId.length <= 1) {
          this.$message({
            message: "当前已是根目录，不能返回上一级",
            type: "info",
          });
          return;
        }
        let folderId = JSON.parse(JSON.stringify(this.folderId))
        folderId.pop()
        this.folderId = folderId

      },
      //同步文件栏数据
      syncData (id) {
        let folderId = JSON.parse(JSON.stringify(this.folderId))
        folderId.push(id)
        this.folderId = folderId
      },

    },

    mounted () {
      this.init()
    },
    watch: {
      keyWord (curVal, oldVal) {
        // 实现input连续输入，只发一次请求
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          // this.getListPOI(curVal);
          this.$parent.keyWord = curVal
          this.$parent.init()

        }, 300);
      },
      folderId (curVal, oldVal) {
        this.$parent.pid = curVal[curVal.length - 1]
        this.$parent.pageSize = 5
        this.$parent.currentPage = 1
        this.$parent.init()

      },
    },
  };

</script>

<style scoped>
  .btn-input {
    margin: 10px;
    display: flex;

  }

  .btn {
    margin: 10px;
  }

  .input {
    width: 200px;
    margin: 10px;
  }

  .select {
    margin: 10px;
  }
</style>